<template>
  <view class="artifact-detail">
    <view v-if="artifactDetail" class="detail-content">
      <image class="artifact-image" :src="artifactDetail.image" mode="aspectFill" />

      <view class="artifact-info">
        <view class="artifact-name">{{ artifactDetail.name }}</view>
        <view class="artifact-era">{{ artifactDetail.era || "年代不详" }}</view>

        <view class="artifact-desc">
          <view class="desc-title">文物介绍</view>
          <view class="desc-content">{{ artifactDetail.description }}</view>
        </view>
      </view>
    </view>

    <view v-else class="loading">
      <wd-loading size="large" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 文物详情
const artifactDetail = ref<any>(null);

// 获取路由参数
onLoad((options: Record<string, any> = {}) => {
  if (options && options.id && options.image && options.description) {
    artifactDetail.value = {
      name: decodeURIComponent(options.id || ""),
      image: decodeURIComponent(options.image || ""),
      description: decodeURIComponent(options.description || ""),
      era: options.era ? decodeURIComponent(options.era) : "",
    };
  }
});
</script>

<style lang="scss">
.artifact-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.detail-content {
  padding: 20rpx;
}

.artifact-image {
  width: 100%;
  height: 500rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.artifact-info {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;

  .artifact-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  .artifact-era {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx;
  }

  .artifact-desc {
    .desc-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #eee;
    }

    .desc-content {
      font-size: 30rpx;
      color: #333;
      line-height: 1.8;
    }
  }
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}
</style>
